<template>
  <view class="content">
    <view class="tabs">
      <u-tabs ref="uTabs"
              :list="list"
              :current="current"
              @change="tabsChange"
              :is-scroll="false"
              swiperWidth="750"
              gutter="69"
              active-color="#102D51"
              inactive-color="#666666"
              font-size="30"
              bar-width="50"
              bar-height="8"
              height="108.69"
      >
      </u-tabs>
    </view>
    <view class="interval"></view>
    <view class="image__content" v-if="couponList.length == 0 ">
      <image class="coupon__blank" src="https://source.qingyunclouds.com/DefaultPage.png"></image>
      <view class="bottom__line"> 暂无优惠卷哦~</view>
    </view>
    <view class="couponBg" v-else v-for="coupon in couponList" :key="coupon.id">
      <view class="coupon__main">
        <u-avatar :size="120" class="shopAvatar" :src="coupon.coverImg" mode="square"></u-avatar>

        <view class="shopText">

          <view class="shopText__center">{{coupon.title}}</view>
          <view class="shopText__bottom">
            <view class="coupon-time">
              有效期至{{coupon.endTime}}
            </view>
          </view>
        </view>
        <text class="getCoupon" v-if="coupon.useStatus == 0" @click="enterCouponInfo(coupon.id)">立即使用</text>
        <!--            <text class="getCoupon" @click="enterCouponInfo(coupon.coupon.id)">立即使用</text>-->
      </view>
    </view>
    <u-loadmore margin-top="20" margin-bottom="20" v-if="couponList.length > 0" :status="loadingStatus"/>

    <w-loading text="加载中..." mask="true" click="true" ref="loading"></w-loading>
  </view>
</template>

<script>

import {couponList} from "../../api/shop";
import {delTime} from "../../utils/utils";

export default {
  data() {
    return {
      url: 'http://qyw0t90pt.hn-bkt.clouddn.com/img/blog/4d9a4b5cc3ee619b66d026c8bf228ee2.png',
      dataList: [],
      DSY: [], // 0
      YSY: [], //1
      YGQ: [], //2
      imgList: [{
        name: '待使用',
      }, {
        name: '已使用',
        url: ''
      }, {
        url: ''
      }],
      src: "../../static/img/",
      list: [{
        name: '代金券'
      }, {
        name: '折扣券'
      }, {
        name: '兑换券'
      }],

      current: 0,
      swiperCurrent: 0,
      //活动id
      activityId: "",
      //优惠券列表
      couponList: [],
      query: {
        pageNum: 1,
        pageSize: 15
      },
      //总页数
      totalPage: undefined,
      loadingStatus: 'loadmore',


    }
  },
  onLoad() {
    // this.activityId = uni.getStorageSync('activityId');
  },
  onShow() {
    this.current = 0;
    this.query.pageNum = 1;
    this.getCoupon(1)
  },
  methods: {
    //获取优惠券列表
    //type 1首次加载 2分页数据
    getCoupon(type) {
      this.$refs.loading.open()
      // this.query.activityId = this.activityId;
      this.query.type = this.current;
      this.loadingStatus = "loading"
      couponList(this.query).then(res => {
        this.$refs.loading.close();
        if (res.code == 200) {
          let couponData = res.rows;
          if (couponData.length > 0) {
            couponData.forEach(item => {
              item.endTime = delTime(item.endTime);
            })
          }
          if (type == 1) {
            this.couponList = res.rows;
          } else {
            this.couponList.push.apply(this.couponList, res.rows)
          }
          this.totalPage = Math.ceil(res.total / this.query.pageSize)
          if (this.query.pageNum < this.totalPage) {
            this.loadingStatus = "loadmore"
          }
          if (this.query.pageNum >= this.totalPage) {
            this.loadingStatus = "nomore"
          }


        }
      }).catch(err => {
        this.$refs.loading.close()
      })
    },

    //进入优惠券详情
    enterCouponInfo(id) {
      uni.navigateTo({
        url: "/pages/coupon/couponInfo?couponId=" + id
      })
    },
    // demo
    demo({detail}) {
      let val = detail.current
      console.log(detail.current, 'demo')
      if (val == 0) {
        this.dataList = this.DSY
      } else if (val == 1) {
        this.dataList = this.YSY
      } else {
        this.dataList = this.YGQ
      }
    },
    // tabs通知swiper切换
    tabsChange(index) {
      console.log(index, '事件')
      this.current = index;
      this.query = {
        pageNum: 1,
        pageSize: 15
      }
      this.getCoupon(1)
    },
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition(e) {
      let dx = e.detail.dx;
      this.$refs.uTabs.setDx(dx);

    },
    animationfinish(e) {
      let current = e.detail.current;
      this.$refs.uTabs.setFinishCurrent(current);
      this.swiperCurrent = current;
      this.current = current;

    },

  },
  onReachBottom() {
    if (this.query.pageNum <= this.totalPage) {
      this.query.pageNum += 1;
      this.getCoupon(2)
    }
  }
}
</script>

<style lang="scss" scoped>
.tabs {
  width: 100%;
  height: 108.5rpx;
  position: fixed;
  top: 0;
  z-index: 99999999;
}

.content {
  font-size: 20px;

}

.coupon__content {
  width: 100%;

}

.interval {
  width: 100%;
  height: 108.5rpx;
}

.image__content {
  margin-top: 108rpx;
}

.coupon__blank {
  display: block;
  width: 334rpx;
  height: 180rpx;
  margin: 0rpx auto;
}

.bottom__line {
  width: 100%;
  height: 42rpx;
  font-size: 30rpx;
  color: #2F2F2F;
  margin-top: 20rpx;
  text-align: center;
}

.couponBg {
  width: 100%;
  height: 250rpx;
  background: url("https://source.qingyunclouds.com/couponBg.png");
  background-size: 100% 100%;
  overflow: hidden;
  margin-bottom: -40rpx;

  .coupon__main {
    width: 80%;
    height: 170rpx;
    margin: 30rpx auto;
    display: flex;
    align-items: center;

    .shopAvatar {
      margin: 0 30rpx;
    }

    .shopText {
      width: 80%;
      height: 120rpx;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      margin-left: 20rpx;

      .shopText__top {
        display: flex;

        .tab {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 35rpx;
          width: 80rpx;
          color: #ffffff;
          background: #444444;
          font-size: 24rpx;
          text-align: center;
          border-radius: 7rpx;
          margin-right: 15rpx;

        }

        > text {
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          font-size: 24rpx;
          color: #2F2F2F;
          font-weight: bold;

        }
      }

      .shopText__center {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #102D51;
        opacity: 0.6;
        font-weight: 600;
        font-size: 31rpx;
        width: 80%;

      }

      .shopText__bottom {
        font-size: 24rpx;

        > .coupon-time {
          white-space: nowrap;
          width: 250rpx;
          height: 40rpx;
          color: #2F2F2F;
        }

      }
    }

    .getCoupon {

      font-size: 24rpx;
      color: #102D51;
      margin-left: 10rpx;
      font-weight: bold;
    }
  }
}

.loading {
  margin: 20rpx 0;
}
</style>

